<template>
  <!-- 控制按钮 -->
  <el-button type="primary" @click="toggleDrawer" class="toggle-btn" :class="{ 'is-open': isOpen }">
    <Icon :icon="isOpen ? 'ep:arrow-left' : 'ep:arrow-right'" />
  </el-button>

  <!-- 抽屉容器 -->
  <div class="drawer-wrapper" :class="{ 'is-open': isOpen }">
    <!-- 抽屉内容 -->
    <div class="drawer-content">
      <!-- 抽屉头部 -->
      <div class="drawer-header">
        <h3 class="header-title">选择节点</h3>
        <el-button class="close-btn" type="danger" text @click="toggleDrawer">
          <Icon icon="ep:close" />
        </el-button>
      </div>
      <!-- 抽屉主体 -->
      <div class="drawer-body">
        <div class="choose-nodes h-full flex flex-col gap-row-5">
          <!-- 搜索框部分 -->
          <div class="choose-nodes__search flex items-center gap-col-2">
            <el-input v-model="keywords" @keydown.enter="search" placeholder="请输入话术简称" />
            <el-button type="primary" @click="search">
              <Icon icon="ep:search" />
            </el-button>
            <el-button @click="resetSearch">重置</el-button>
          </div>
          <!-- 搜索结果部分 -->
          <template v-if="isSearching">
            <div class="choose-nodes__search-content w-full h-full flex flex-col gap-row-2">
              <el-tag
                v-for="script of searchByKeywords"
                :key="script.id"
                class="choose-nodes__tag"
                :draggable="true"
                @dragstart="onDragStart($event, script)"
                type="primary"
                size="large"
              >
                {{ script.name }}
              </el-tag>
            </div>
          </template>
          <!-- 正常按回答类型分类显示 -->
          <div v-else class="choose-nodes__collapse">
            <el-collapse v-model="currentReplyType">
              <template v-for="value in ReplyTypes" :key="value">
                <el-collapse-item
                  v-if="isNumber(value)"
                  :title="`${formatIsReply(value as number)}话术`"
                  :name="value"
                >
                  <template #default>
                    <div class="flex flex-col gap-row-2">
                      <el-tag
                        v-for="script of scriptsGroupByReply[value]"
                        :key="script.id"
                        class="choose-nodes__tag"
                        :draggable="true"
                        @dragstart="onDragStart($event, script)"
                        type="primary"
                        size="large"
                      >
                        {{ script.name }}
                      </el-tag>
                    </div>
                  </template>
                </el-collapse-item>
              </template>
            </el-collapse>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Icon } from '@/components/Icon'
import { ReplyTypes, ScriptInfo } from '@/types'
import { formatIsReply } from '@/utils/formatter'
import { isNumber } from '@/utils/is'
import { ScriptApi } from '@/api/system/script'
import * as _ from 'lodash-es'
import useDragAndDrop from '@/store/modules/flow/useDnD'
import { ElMessage } from 'element-plus'

const { onDragStart } = useDragAndDrop()
const isOpen = ref(true)
const keywords = ref('')
const scriptList = ref<ScriptInfo[]>([])
const currentReplyType = ref<ReplyTypes>(ReplyTypes.YesOrNo)
const isSearching = ref(false)

// 话术库分组后
const scriptsGroupByReply = computed(() => _.groupBy(scriptList.value, 'isReply'))
const searchByKeywords = ref([])
const toggleDrawer = () => {
  isOpen.value = !isOpen.value
}

function search() {
  if (keywords.value.length === 0) {
    ElMessage.warning('请先输入关键字')
    isSearching.value = false
    return
  }
  searchByKeywords.value = scriptList.value.filter((item) => item.name.includes(keywords.value))
  isSearching.value = true
}
function resetSearch() {
  isSearching.value = false
}

onMounted(async () => {
  const { list } = await ScriptApi.getScriptPage({ page: 1, pageSize: 100 })
  scriptList.value = list
})
</script>

<style lang="less" scoped>
.el-button {
  margin: 0;
  padding: 8px;
}

/* 按钮定位优化 */
.toggle-btn {
  position: absolute;
  left: 0;
  top: 50%;
  padding: 8px;
  transform: translateY(-50%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 2;

  &:hover {
    transform: translateY(-50%) scale(1.05);
  }

  &.is-open {
    transform: translateX(300px) translateY(-50%);
  }
}

// 抽屉容器
.drawer-wrapper {
  position: absolute;
  left: -300px;
  top: 0;
  width: 300px;
  height: 100%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  z-index: 2;

  &.is-open {
    transform: translateX(300px);
    opacity: 1;
  }

  .drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--el-bg-color);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    border-radius: 8px 0 0 8px;
    overflow: hidden;

    /* 头部高度精确控制 */
    .drawer-header {
      padding: 16px 20px;
      border-bottom: 1px solid var(--el-border-color-light);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--el-fill-color-light);
      border-radius: 8px 0 0 0;

      .header-title {
        margin: 0;
        font-size: 18px;
        font-weight: bolder;
        color: var(--el-text-color-primary);
      }

      .close-btn {
        padding: 6px;

        &:hover {
          background-color: var(--el-color-danger-light-9);
        }
      }
    }

    /* 内容区域高度计算 */
    .drawer-body {
      height: calc(100% - 1.25rem - 45px);
      padding: 16px 20px;
      border-radius: 0 0 0 8px;
      box-sizing: border-box;
    }
  }
}

.choose-nodes__search-content,
.choose-nodes__collapse {
  height: 100%;
  overflow-y: auto;

  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.choose-nodes__tag {
  cursor: pointer;
  width: 100%;
  overflow: hidden;

  &:deep(.el-tag__content) {
    flex: 1;
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
  }
}
</style>
